<script setup lang="ts">
import { EOrderState, EOrderTimes } from '@/enum';
import useToast from '@/hooks/useToast';
import Tools from '@/utils/tools';

interface IState {
  show: boolean;
  datetimePicker: { show: boolean; title: string; currentDate: number; minDate: number };
  params: { orderState: string; date: string; beginDate: string; endDate: string };
}

type EmitEvents = {
  (event: 'change', payload: { orderState: string; date: string; beginDate: string; endDate: string }): void;
};

const paramsDefault = { date: '', orderState: '', beginDate: '', endDate: '' };
const { showToast } = useToast();
const state = reactive<IState>({ show: false, datetimePicker: { show: false, title: '请选择开始时间', currentDate: new Date().getTime(), minDate: Date.now() - 5 * 365 * 24 * 60 * 60 * 1000 }, params: { ...paramsDefault } });
const emits = defineEmits<EmitEvents>();

// 订单状态枚举组合
const ordStatEnumComb = Object.fromEntries(Object.entries(EOrderState).filter(([key, value]) => isNaN(Number(key))));

// 按时间筛选枚举组合
const selCombByTime = Object.fromEntries(Object.entries(EOrderTimes).filter(([key, value]) => isNaN(Number(key))));

// 选择时间点击
const handleSelectDateClick = (title: string) => {
  if (title === '请选择终止时间' && !state.params.beginDate) {
    showToast('请先选择开始时间');
    return;
  }
  if (title === '请选择开始时间') {
    if (state.params.beginDate) {
      state.datetimePicker.currentDate = new Date(state.params.beginDate).getTime();
    }
    state.datetimePicker.minDate = Date.now() - 5 * 365 * 24 * 60 * 60 * 1000;
  }
  if (title === '请选择终止时间') {
    if (state.params.endDate) {
      state.datetimePicker.currentDate = new Date(state.params.endDate).getTime();
    }
    state.datetimePicker.minDate = new Date(state.params.beginDate).getTime();
  }
  state.datetimePicker = { ...state.datetimePicker, show: true, title };
};

// 时间选择器选择事件
const handleDateTimeConfirm = (e: any) => {
  if (state.datetimePicker.title === '请选择开始时间') {
    state.params.beginDate = Tools.formatTimestamp(e.detail, 'YYYY-MM-DD');
    if (e.detail < new Date(state.params.endDate).getTime()) {
      state.params.endDate = '';
    }
  } else {
    state.params.endDate = Tools.formatTimestamp(e.detail, 'YYYY-MM-DD');
  }
  state.datetimePicker.show = false;
};

// 提交参数
const handleSubmitParamsters = () => {
  if (state.params.beginDate && !state.params.endDate) {
    showToast('请选择终止时间');
    return;
  }
  emits('change', state.params);
};
</script>

<template>
  <view class="mr-3" @click="state.show = true">
    <i class="i-stash:filter-light font-size-5"></i>
    <view class="c-text-10 text-align-center">筛选</view>
  </view>

  <van-popup round position="top" :show="state.show" @close="state.show = false">
    <view class="c-pd bg-#f5f5f5">
      <view class="fw-bold mb-12px">订单状态选择</view>
      <view class="grid grid-cols-3 gap-3">
        <view
          class="text-align-center c-br py-4px c-text-12"
          :class="state.params.orderState === String(key) ? 'c-bg text-white' : 'bg-white '"
          v-for="(key, value) in ordStatEnumComb"
          :key="key"
          @click="state.params = { ...state.params, orderState: state.params.orderState === String(key) ? '' : String(key) }"
        >
          {{ value }}
        </view>
      </view>
      <view class="my-12px fw-bold">按时间选择</view>
      <view class="grid grid-cols-3 gap-3">
        <view
          class="text-align-center c-br py-4px c-text-12"
          :class="state.params.date === String(key) ? 'c-bg text-white' : 'bg-white '"
          v-for="(key, value) in selCombByTime"
          :key="key"
          @click="state.params = { ...state.params, date: state.params.date === String(key) ? '' : String(key) }"
        >
          {{ value }}
        </view>
      </view>
      <view class="flex justify-between mt-12px">
        <view class="bg-white text-align-center c-br py-4px c-text-12 flex-1" @click="handleSelectDateClick('请选择开始时间')">
          <text v-if="!state.params.beginDate" class="c-text-color-grey">开始时间</text>
          <text v-else>{{ state.params.beginDate }}</text>
        </view>
        <view class="mx-12px w-30px"><van-divider /></view>
        <view class="bg-white text-align-center c-br py-4px c-text-12 flex-1" @click="handleSelectDateClick('请选择终止时间')">
          <text v-if="!state.params.endDate" class="c-text-color-grey">终止时间</text>
          <text v-else>{{ state.params.endDate }}</text>
        </view>
      </view>

      <view class="flex justify-between mt-12px">
        <view class="flex-1 mr-12px"><van-button block size="small" @click="state.params = { ...paramsDefault }">重置</van-button></view>
        <view class="flex-1"><van-button type="primary" block size="small" @click="handleSubmitParamsters">确定</van-button></view>
      </view>
    </view>
  </van-popup>

  <van-popup round :overlay="false" position="bottom" :show="state.datetimePicker.show">
    <van-datetime-picker type="date" :min-date="state.datetimePicker.minDate" :value="state.datetimePicker.currentDate" :title="state.datetimePicker.title" @cancel="state.datetimePicker.show = false" :max-date="Date.now()" @confirm="handleDateTimeConfirm" />
  </van-popup>
</template>
